<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <div>
          <FlightsFilter
            v-if="filtersData.info"
            :fdata="filtersData"
            @filterData="setFilterData"
          />
        </div>

        <!-- 航班头部布局 -->
        <div class="flightsHead">
          <el-row>
            <el-col :span="6">航空信息</el-col>
            <el-col :span="6">起飞时间</el-col>
            <el-col :span="6">到达时间</el-col>
            <el-col :span="6">价格</el-col>
          </el-row>
        </div>

        <!-- 航班信息 -->
        <div class="flightsList">
          <FlightsItem
            v-for="(item, index) in dataList"
            :key="index"
            :flightData="item"
          />

          <div v-if="isshow">没有查询到你想的数据</div>
        </div>
        <!-- 分页结构 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="flightsList.length"
        >
        </el-pagination>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <FlightsAside />
      </div>
    </el-row>
  </section>
</template>

<script>
import FlightsItem from "@/components/air/flightsItem.vue";
import FlightsFilter from "@/components/air/flightsFilter.vue";
import FlightsAside from "@/components/air/flightsAside.vue";
export default {
  components: {
    FlightsItem,
    FlightsFilter,
    FlightsAside,
  },
  data() {
    return {
      isshow: false,
      showDetail: false,
      // 所有机票数据 --源数据 100 > 10,这只是我们进行业务处理时的参照数据，我们在进行分页的时候会从这个数组中获取数据，但是永远不会修改这个数组
      flightsList: [],
      dataList: [], // 这才是当前页的列表数据
      pageIndex: 1, // 当前页码
      pageSize: 5, // 每页显示的记录数
      // 访问一个不存在的变量--报错 ** is not defined
      // 访问一个对象不存在的属性，只是返回undefined,不会报错，但是你不能再使用这个undefined去调用其它的成员
      filtersData: {}, // 这是要传递给filghtsFilter.vue的数据对象
    };
  },
  methods: {
    getdata() {
      console.log(this.$route.query);
      // 发起请示获取机票列表数据
      // JiPiao - 机票列表 http:127.0.0.1:1337/airs
      this.$axios({
        url: "/airs",
        params: this.$route.query,
      }).then((res) => {
        console.log(res);
        this.flightsList = res.data.flights;
        // 生成了一个新的对象
        this.filtersData = {
          info: res.data.info,
          options: res.data.options,
          flights: res.data.flights, // 为了后期的机票的筛选
        };
        // 生成当前分页数据
        this.getPageData();
      });
    },
    // 实现筛选之后的列表数据渲染
    setFilterData(arr) {
      if (arr.length > 0) {
        this.isshow = false;
        this.pageIndex = 1;
      } else {
        this.$message.info("没有查询到数据");
        this.isshow = true;
      }
      this.flightsList = arr;
      this.getPageData();
    },
    // 单击下拉列表修改每页所显示的数量时触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getPageData();
    },
    // 单击页码时触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getPageData();
    },
    // 所谓分页功能就是当用户进行某个操作之后，你得根据用户的操作所生成的参数，截取机票数组中的某些数据
    // 机票数据是一个数组===splice   slice
    getPageData() {
      const start = (this.pageIndex - 1) * this.pageSize;
      const end = start + this.pageSize;
      // 我们需要从数组中截取某些数据？
      // 细节：splice会改变源数组，在splice之后，数据会减少，对业务有害,所以你可以考虑先将数组的成员复制一份再进行处理，这样就不会改变源数组
      // splice(起始索引，数量)
      // slice(起始索引，结束索引)：包含起始索引位置的元素，但是不包含结束索引位置的元素,它不会改变源数组
      // this.dataList = [...this.flightsList].splice((this.pageIndex-1)*this.pageSize,this.pageSize) // 1
      this.dataList = this.flightsList.slice(start, end);
      console.log(this.flightsList.length);
      // this.dataList = this.flightsList.splice((this.pageIndex-1)*this.pageSize,this.pageSize) // 2
      // this.dataList = this.flightsList.splice((this.pageIndex-1)*this.pageSize,this.pageSize) // 3
    },
  },
  watch: {
    $route() {
      this.getdata();
    },
  },
  mounted() {
    this.getdata();
  },
};
</script>
<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}
.flightsHead {
  line-height: 40px;
  border: 1px solid #ddd;
  background-color: rgb(246, 246, 246);
  text-align: center;
  margin: 10px 0;
}
.flightsList {
  border: 1px solid #ddd;
  text-align: center;
  .baseinfo {
    // line-height: 70px;
    display: flex;
    height: 70px;
    align-items: center;
    p {
      font-size: 24px;
    }
    .priceTip {
      color: orange;
      font-size: 24px;
      font-weight: bold;
    }
    .subbaseinfo {
      display: flex;
      align-items: center;
    }
  }
  .detailinfo {
    padding: 20px 0;
    background-color: #ccc;
  }
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>